<template>
    <div>
        <div>
            <div class="content">
                <!-- <p>{{title}}上传</p> -->
                <div v-show="!headerImage" class="no-img">
                    <i class="iconfont icon-jia1"></i>
                    <p>{{subTitle}}</p>
                </div>
                <div class="show" v-show="headerImage">
                    <div class="picture" :style="'backgroundImage:url('+headerImage+')'">
                    </div>
                    <i class="iconfont icon-guanbi1" @click="delImage" v-show="headerImage"></i>
                </div>
                <div class="upload_img" v-if="!headerImage">
                    <!-- <input type="file" id="upload" class="upload-btn" accept="image" @change="upload"/>
        <label for="upload"></label>
                    <mt-button class="upload-icon iconfont icon-shangchuan1"></mt-button>-->
                    <a href="javascript:;" class="file iconfont icon-shangchuan1">
                        <input type="file" id="upload" accept="image" @change="upload"  class="upload_input"/>上传{{title}}图片
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Exif from "exif-js";
import {uploadImg,delImg} from '../api'
import {Toast,Indicator} from 'mint-ui'
export default {
    name: "upload",
    props:["title","pic","subTitle"],
    data() {
        return {
            headerImage: "",
            picValue: "",
            imgPath:""
        };
    },
    methods: {
        upload(e) {
            // console.log(e);
            let files = e.target.files || e.dataTransfer.files;
            if (!files.length) return;
            this.picValue = files[0];
            this.imgPreview(this.picValue);
        },
        delImage() {
            const data = {imgurl:this.imgPath}
            delImg(data).then(res=>{
                console.log(res);
                this.headerImage = "";
                this.$emit('getImg',[res.data,this.title]);
            }).catch(err=>{
                Toast("删除失败")
            })
        },
        imgPreview(file) {
            Indicator.open('加载中...');
            let self = this;
            let Orientation;
            //去获取拍照时的信息，解决拍出来的照片旋转问题
            Exif.getData(file, function() {
                Orientation = Exif.getTag(this, "Orientation");
            });
            // 看支持不支持FileReader
            if (!file || !window.FileReader) return;

            if (/^image/.test(file.type)) {
                // 创建一个reader
                let reader = new FileReader();
                // 将图片2将转成 base64 格式
                reader.readAsDataURL(file);
                // 读取成功后的回调
                reader.onloadend = function() {
                    let result = this.result;
                    let img = new Image();
                    img.src = result;
                    //判断图片是否大于100K,是就直接上传，反之压缩图片
                    if (this.result.length <= 100 * 1024) {
                        self.headerImage = this.result;
                        self.postImg(self.headerImage);
                    } else {
                        img.onload = function() {
                            let data = self.compress(img, Orientation);
                            self.headerImage = data;
                            self.postImg(self.headerImage);
                        };
                    }
                    
                    // let startNum = self.headerImage.indexOf("base64,");
                    // startNum = startNum*1 + 7;
                    // self.headerImage = self.headerImage.slice(startNum);
                    // self.$emit('getImg',[self.headerImage,self.title]);
                    // console.log(file);
                    // self.$emit('getImg',[self.headerImage]);
                };
            }
        },
        dataURLtoBlob(dataurl) {
                        var arr = dataurl.split(','),
                        mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]),
                        n = bstr.length,
                        u8arr = new Uint8Array(n);
                        while (n--) {
                            u8arr[n] = bstr.charCodeAt(n);
                        }
                        return new Blob([u8arr], {
                            type: mime
                        });
        },
        postImg(data) {
            Indicator.close();
            //这里写接口
            // console.log(data);
            let formData = new FormData();
            let blobDate = this.convertBase64UrlToBlob(data);
            formData.append("image", blobDate,"image.jpg");
            // formData.append("token",this.$store.getters.token)
            uploadImg(formData).then(res=>{
                this.imgPath = res.data;
                this.$emit('getImg',[res.data,this.title]);
            }).catch(err=>{
                // console.log()
                Toast("添加失败")
            })
        },
        convertBase64UrlToBlob(urlData){
            var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        },
        rotateImg(img, direction, canvas) {
            //最小与最大旋转方向，图片旋转4次后回到原方向
            const min_step = 0;
            const max_step = 3;
            if (img == null) return;
            //img的高度和宽度不能在img元素隐藏后获取，否则会出错
            let height = img.height;
            let width = img.width;
            let step = 2;
            if (step == null) {
                step = min_step;
            }
            if (direction == "right") {
                step++;
                //旋转到原位置，即超过最大值
                step > max_step && (step = min_step);
            } else {
                step--;
                step < min_step && (step = max_step);
            }
            //旋转角度以弧度值为参数
            let degree = (step * 90 * Math.PI) / 180;
            let ctx = canvas.getContext("2d");
            switch (step) {
                case 0:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.drawImage(img, 0, 0);
                    break;
                case 1:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, 0, -height);
                    break;
                case 2:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, -height);
                    break;
                case 3:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, 0);
                    break;
            }
        },
        compress(img, Orientation) {
            let canvas = document.createElement("canvas");
            let ctx = canvas.getContext("2d");
            //瓦片canvas
            let tCanvas = document.createElement("canvas");
            let tctx = tCanvas.getContext("2d");
            let initSize = img.src.length;
            let width = img.width;
            let height = img.height;
            //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
            let ratio;
            if ((ratio = (width * height) / 4000000) > 1) {
                console.log("大于400万像素");
                ratio = Math.sqrt(ratio);
                width /= ratio;
                height /= ratio;
            } else {
                ratio = 1;
            }
            canvas.width = width;
            canvas.height = height;
            //        铺底色
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            //如果图片像素大于100万则使用瓦片绘制
            let count;
            if ((count = (width * height) / 1000000) > 1) {
                console.log("超过100W像素");
                count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
                //            计算每块瓦片的宽和高
                let nw = ~~(width / count);
                let nh = ~~(height / count);
                tCanvas.width = nw;
                tCanvas.height = nh;
                for (let i = 0; i < count; i++) {
                    for (let j = 0; j < count; j++) {
                        tctx.drawImage(
                            img,
                            i * nw * ratio,
                            j * nh * ratio,
                            nw * ratio,
                            nh * ratio,
                            0,
                            0,
                            nw,
                            nh
                        );
                        ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                    }
                }
            } else {
                ctx.drawImage(img, 0, 0, width, height);
            }
            //修复ios上传图片的时候 被旋转的问题
            if (Orientation != "" && Orientation != 1) {
                switch (Orientation) {
                    case 6: //需要顺时针（向左）90度旋转
                        this.rotateImg(img, "left", canvas);
                        break;
                    case 8: //需要逆时针（向右）90度旋转
                        this.rotateImg(img, "right", canvas);
                        break;
                    case 3: //需要180度旋转
                        this.rotateImg(img, "right", canvas); //转两次
                        this.rotateImg(img, "right", canvas);
                        break;
                }
            }
            //进行最小压缩
            let ndata = canvas.toDataURL("image/jpeg", 0.1);
            console.log("压缩前：" + initSize);
            console.log("压缩后：" + ndata.length);
            console.log(
                "压缩率：" +
                    ~~((100 * (initSize - ndata.length)) / initSize) +
                    "%"
            );
            tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
            return ndata;
        }
    }
};
</script>
<style scoped>
.content {
    text-align: center;
    margin-top: 10px;
    position: relative;
}
.show {
    /* margin-top: 100px; */
    width: 10rem;
    height: 6rem;
    display: flex;
    overflow: auto;
    position: relative;
    border-radius: 5%;
    border: 1px solid #d5d5d5;
    margin: auto;
}
.picture {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.file {
    position: relative;
    display: inline-block;
    background: #d0eeff;
    border: 1px solid #99d3f5;
    border-radius: 10px;
    padding: 4px 12px;
    overflow: hidden;
    color: #1e88c7;
    text-decoration: none;
    text-indent: 0;
    line-height: 2rem;
    height: 8rem;
}
.file:hover {
    background: #aadffd;
    border-color: #78c3f3;
    color: #004974;
    text-decoration: none;
}
.icon-guanbi1 {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    font-size: 1rem;
    color: #999;
    /* border: 2px solid #fff; */
    border-radius: 50%;
    z-index: 100;
}
.no-img{
    width: 10rem;
    height: 6rem;
    text-align: center;
    /* line-height: 3rem; */
    /* margin: auto; */
    border:0.1rem dashed #ccc;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: 0.8rem;
}
.no-img .iconfont{
    color: #666;
    font-size: 1.2rem;
}
.upload_img{
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    opacity: 0;
}
.upload_input{
    width: 100%;
    height: 8rem;
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
}
</style>
